<template>
    <div>
        <div class="title_box">
          <div class="iconfont icon-left" @click="$router.go(-1)"></div>
          <div class="title">收藏夹</div>
          <div></div>
        </div>
        <div class="list" v-if="collectList.length">
            <ul>
              <li v-for="(item, index) in collectList" :key="index" @click="goDetail(item.goods_id)">
                <div class="left">
                  <img :src="item.goods_small_logo" alt="" />
                </div>
                <div class="right">
                  <div class="goods_name">{{ item.goods_name }}</div>
                  <div class="price_num">
                    <div class="price">￥{{ item.goods_price }}</div>
                    <div @click.stop="del(index)">X</div>
                  </div>
                </div>
              </li>
            </ul>
        </div>

        <div class="default" v-else>收藏夹空空如也~</div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            collectList:[]
        }
    },
    methods:{
        api(){
            return "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=";
        },
        getData(){

            function unique(arr) {
                if (!Array.isArray(arr)) {
                    console.log('type error!')
                    return
                }
                return Array.prototype.filter.call(arr, function(item, index){
                    return arr.indexOf(item) === index;
                });
            }
            this.$store.commit("isCollected",unique(this.$store.getters.getData.collect))

            let collect = this.$store.getters.getData.collect 
            for(let i = 0; i<collect.length; i++){
                axios.get(this.api() + collect[i]).then(data=>{
                    // console.log(data.data.message)
                    let {goods_id,goods_name,goods_price,goods_small_logo} = data.data.message;
                    let goods = {
                        goods_id,
                        goods_name,
                        goods_price,
                        goods_small_logo
                    }
                    this.collectList.push(goods)
                })
            }
        },
        goDetail(id){
            this.$router.push({name:'Details',query: {goods_id:id}})
        },
        del(i){
            this.$store.commit("delcollected",i)
            this.collectList.splice(i,1)
        }
    },
    created(){
        this.getData()
    },
}
</script>


<style lang="less" scoped>

.default{
    text-align: center;
    margin-top: 100px;
}

.list {
  ul {
    li {
      overflow: hidden;
      margin: 10px;
      padding: 10px;
      background: #fff;
      display: flex;
      .inp {
        flex: 1;
        position: relative;
        input {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -7px 0px 0px -7px;
        }
      }
      .left {
        width: 160px;
        height: 160px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 62%;
        margin-left: 10px;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
        .goods_name {
          font-size: 18px;
        }
        .price_num {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          margin: 10px 0;
          .price {
            font-size: 26px;
            span{
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}

    .title_box {
      height: 60px;
      line-height: 60px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }

</style>